<template>
	<view class="index">
		<view class="wrapper">
			<!-- 顶部 -->
			<view class="header">
				<view class="header-area">
					<image src="../../static/icons/map.svg" mode="" class="map-icon"></image>
				</view>

				<view class="area">成都</view>
				<view><input type="text" class="search" placeholder="搜索"></view>
				<view class="header-search">
					<icon type="search" size="24" class="search-icon" />
				</view>

			</view>
			<!-- 文字导航 -->
			<view class="text-nav">
				<view class="recommend">
					<text class="text1">本地推荐</text>
					<text class="text2">最新推荐</text>
					<text class="text3">热门推荐</text>
					<text class="text4">附近推荐</text>
				</view>
			</view>


			<!-- 图标导航 -->
			<view class="nav-icon">


				<view class="icons">
					<view class="alone-icon">
						<image src="../../static/icons/house.svg" mode="" class="house-img"></image>
						<text>房贷</text>
					</view>
					<view class="alone-icon">
						<image src="../../static/icons/car.svg" mode="" class="car-img"></image>
						<text>车贷</text>
					</view>
					<view class="alone-icon">
						<image src="../../static/icons/bag.svg" mode="" class="bag-img"></image>
						<text>公积金贷</text>
					</view>
					<view class="alone-icon">
						<image src="../../static/icons/yes.svg" mode="" class="yes-img"></image>
						<text>保单贷</text>
					</view>
					<view class="alone-icon">
						<image src="../../static/icons/firm.svg" mode="" class="firm-img"></image>
						<text>企业贷</text>
					</view>
					<view class="alone-icon">
						<image src="../../static/icons/list.svg" mode="" class="list-img"></image>
						<text>社保贷</text>
					</view>
					<view class="alone-icon">
						<image src="../../static/icons/star.svg" mode="" class="star-img"></image>
						<text>工薪贷</text>
					</view>
					<view class="alone-icon">
						<image src="../../static/icons/card.svg" mode="" class="card-img"></image>
						<text>信用卡贷</text>
					</view>
					<view class="alone-icon">
						<image src="../../static/icons/peer.svg" mode="" class="peer-img"></image>
						<text>网贷</text>
					</view>
					<view class="alone-icon">
						<image src="../../static/icons/more.svg" mode="" class="more-img"></image>
						<text>更多</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 信息区域 -->
		<view class="messages-card">
			<view class="message-name">
				<text>产品名称：保单贷</text>
				<text>贷款性质：信用贷款</text>
				<text class="name-last1">最低利率：0.85%</text>
				<text class="name-last2">最高额度：30万</text>
			</view>
			<view class="contact">
				<text>立即申请</text>
				<text>在线咨询：立即联系</text>
			</view>
		</view>
		<view class="messages-card message">
			<view class="message-name">
				<text>产品名称：保单贷</text>
				<text>贷款性质：信用贷款</text>
				<text class="name-last1">最低利率：0.85%</text>
				<text class="name-last2">最高额度：30万</text>
			</view>
			<view class="contact">
				<text>立即申请</text>
				<text>在线咨询：立即联系</text>
			</view>
		</view>
		<view class="messages-card message">
			<view class="message-name">
				<text>产品名称：保单贷</text>
				<text>贷款性质：信用贷款</text>
				<text class="name-last1">最低利率：0.85%</text>
				<text class="name-last2">最高额度：30万</text>
			</view>
			<view class="contact">
				<text>立即申请</text>
				<text>在线咨询：立即联系</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.index {
		height:100%;
		width:100%;
		background-color: #f5f5f5;
		padding-bottom: 40upx;
	}

	.wrapper {
		width: 100%;
		height: 520upx;
		background-color: #0875ee;
		box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
	}

	// 头部的样式
	.header {

		display: flex;
		height: 100upx;
		padding-top: 20upx;

		.map-icon {
			display: inline-block;
			margin: 20upx 15upx 10upx 15upx;
			width: 50upx;
			height: 50upx;

			font-size: 50upx;

			margin-left: 10upx;

		}

		.header-area {
			height: 38upx;

		}

		.area {

			width: 96upx;
			height: 38upx;

			color: rgba(80, 80, 80, 1);
			background-color: rgba(255, 255, 255, 1);
			border-radius: 20upx;
			font-size: 26upx;
			line-height: 130%;
			text-align: center;
			margin: 30upx 15upx 10upx 10upx;

		}

		.search {

			width: 420upx;
			height: 58upx;

			text-indent: 22upx;

			background-color: #fff;
			border-radius: 30upx;
			font-size: 26upx;
			line-height: 100%;
			text-align: left;
			margin: 20upx 15upx 10upx 10upx;
		}

		.header-search {
			width: 60upx;
			height: 60upx;
			border-radius: 12upx;

			text-align: center;
			line-height: 100%;
			background-color: rgba(255, 255, 255, 1);
			margin: 20upx 15upx 10upx 10upx;

		}

		/deep/ .uni-icon-search {
			color: #0875ee !important;
			;
		}

	}

	// 文字导航的样式
	.recommend {
		display: flex;
		justify-content: space-around;
		height: 60upx;
		margin-top: 40upx;
		font-size: 32upx;
		color: #fff;

	}

	// 图标导航的样式
	.nav-icon {

		width: 85%;
		height: 260upx;
		text-align: center;
		background-color: #fff;
		margin: 10upx 32upx 20upx 50upx;

		.icons {
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			.alone-icon {
				width: 86upx;
				height: 110upx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				font-size: 22upx;
				color: #505050;
				margin: 20upx 0 0 40upx;

				text {
					display: inline-block;
					width: 94upx;
					height: 26upx;
					margin-left: -20upx;
				}

			}
		}
	}

	.house-img,
	.car-img,
	.bag-img,
	.yes-img,
	.firm-img,
	.peer-img,
	.star-img,
	.card-img,
	.list-img,
	.more-img {
		display: inline-block;
		width: 46upx;
		height: 46upx;
	}

	// 信息区域样式
	.messages-card {
		margin: 20upx 40upx 40upx 20upx;
		// width:355px;
		height: 200upx;
		font-size: 24upx;

		.message-name {
			height: 130upx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			background-color: #43cf5d;
			border-top-left-radius: 13upx;
			border-top-right-radius: 16upx;

			text {
				margin-top: 10upx;
				width: 252upx;
				height: 36upx;
				color: #505050;
				text-align: center;

			}

		}

		.name-last1 {
			padding-left: -2upx !important;
		}

		.name-last2 {
			padding-right: 18upx !important;
		}

		.contact {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			height: 70upx;
			line-height: 70upx;
			border-bottom-left-radius: 16upx;
			border-bottom-right-radius: 16upx;
			padding: 0 20upx 0 30upx;

		}
	}

	.message {
		margin-top: 10upx;
	}
</style>
